<template>
	<view class="header">
		<u-navbar :title="title" :background="background" :is-back="isBack" :back-icon-color="backColor"
			:border-bottom="borderBottom" :title-color="textColor" :title-bold="titleBold" :is-fixed="isFixed"
			@click-left="onClickLeft" @click-right="onClickRight" ref="uNavbar">
			<template #right>
				<slot class="content">
					<view class="rightContent" @click="selectRightIconChange">{{rightContent}}
						<image :src="rightIcon" mode=""></image>
					</view>
				</slot>
			</template>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: 'header-title',
		props: {
			shaixuan: {
				type: String,
				default: ''
			},
			title: { //标题内容
				type: String,
				default: '',
			},
			rightContent: {
				type: String, //右侧字体
				default: '',
			},
			rightIcon: {
				type: String, //右侧图标
				default: '',
			},
			isBack: { //左侧是否显示返回箭头
				type: Boolean,
				default: false,
			},
			background: { //背景设置
				type: Object,
				default: () => {},
			},
			textColor: { //标题文字颜色
				type: String,
				default: '#323233',
			},
			borderBottom: { //是否加下边框
				type: Boolean,
				default: true,
			},
			titleBold: { //标题文字加粗
				type: Boolean,
				default: false
			},
			backColor: { //左侧返回箭头的颜色
				type: String,
				default: ''
			},
			isFixed: { //头部是否固定
				type: Boolean,
				default: true
			},
			tabbarIndex: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		computed: {},
		watch: {},
		created() {},
		methods: {
			// 返回点击
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			onClickRight() {},
			navbarHeight() {
				return this.$refs.uNavbar.navbarHeight;
			},
			navbarInnerStyle() {
				return this.$refs.uNavbar.navbarInnerStyle;
			},
			selectRightIconChange() {
				this.$emit('selectRightIconChange')
			}
		},
	};
</script>

<style scoped lang='scss'>
	.header {
		width: 100%;

		.content {
			text-align: center;
			transform: translateX(-200upx);
		}
	}

	/deep/ .u-navbar-inner {
		display: flex;
		justify-content: center;
	}

	.rightContent {
		width: 100upx;
		height: 88upx;
		line-height: 88upx;
		margin-right: 20upx;
		font-size: 26upx;
		display: flex;
		align-items: center;

		image {
			vertical-align: middle;
			width: 30upx;
			height: 30upx;
			margin-left: 5rpx;
		}
	}
</style>